<template>
  <div v-if="props.mode === 'detail'">
    <span>{{ modelValue }}</span>
    <span class="suffix" v-if="props.config.unit">{{ props.config.unit }}</span>
  </div>
  <el-input
    v-else
    type="number"
    v-bind="defaultAttr"
    v-model.number="modelValue"
    @change="handleChange"
    style="width: 100%"
    class="inputFund"
  >
    <template #suffix v-if="props.config.unit">
      <span>{{ props.config.unit }}</span>
    </template>
  </el-input>
</template>

<script setup>
// v-model值
const modelValue = defineModel()

// 输入框配置项
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
  mode: {
    // 'edit' | 'detail' | 'add'
    type: String,
    default: 'detail',
  },
})

const defaultAttr = computed(() => {
  // 设置默认绑定值
  let { attrs = {} } = props.config
  // 获取默认项
  attrs['placeholder'] = attrs?.placeholder || `请输入${props.config.label}`

  // 判断禁用
  attrs['disabled'] = props.config?.disabled || false
  // attrs['precision'] = props.config?.precision || null
  return { ...attrs }
})

// 事件
const emits = defineEmits(['change'])
const handleChange = (value) => {
  if (value && props.config?.precision) {
    console.log(value && props.config?.precision)

    // 处理小数位数
    const formattedValue = Number(value).toFixed(props.config?.precision)
    modelValue.value = Number(formattedValue)
  }

  if (props.config.event) {
    emits('change', value)
  }
}
</script>

<style lang="scss" scoped>
.suffix {
  color: var(--el-input-icon-color, var(--el-text-color-placeholder));
  transition: all var(--el-transition-duration);
  pointer-events: none;
  margin-left: 8px;
}

:deep() {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}
</style>
